<template>
  <div class="news-mobile">
    <!-- 页头 -->
    <div class="yetou">
      <div class="none2">
        <div class="bt-left">
          <h1>万力达消防设备大卖场</h1>
          <p>{{configData.mobile}}</p>
        </div>
        <div class="menu">
          <img @click="hide = !hide" src="../assets/991.jpg" />
        </div>
      </div>
    </div>
    <!-- 页头 -->
    <!--导航开始-->
    <div class="vae" v-show="hide">
      <ul class="nav-tb">
        <li :class="navmoIndex == 0 ? 'active' : ''" @click="selNav(0)">
          <router-link to="/page/home_mobile">首页</router-link>
          <!-- <a href="#">首页</a> -->
        </li>
        <li :class="{ active: navmoIndex === 1 }" @click="selNav(1)">
          <router-link to="/page/product_mobile?num=0">消防水泵</router-link>
          <!--  <a href="#">消防水泵</a> -->
        </li>
        <li :class="{ active: navmoIndex === 2 }" @click="selNav(2)">
          <router-link to="/page/product_mobile?num=1">水泵控制柜</router-link>
          <!-- <a href="#">水泵控制柜</a> -->
        </li>
        <li :class="{ active: navmoIndex === 3 }" @click="selNav(3)">
          <router-link to="/page/product_mobile?num=2">气体灭火</router-link>
          <!--  <a href="#">气体灭火</a> -->
        </li>
        <li :class="{ active: navmoIndex === 4 }" @click="selNav(4)">
          <router-link to="/page/product_mobile?num=3">火灾报警</router-link>
          <!--     <a href="#">火灾报警</a> -->
        </li>
        <li :class="{ active: navmoIndex === 5 }" @click="selNav(5)">
          <router-link to="/page/product_mobile">产品中心</router-link>
          <!-- <a href="#">产品中心</a> -->
        </li>
        <li :class="{ active: navmoIndex === 6 }" @click="selNav(6)">
          <router-link to="/page/witness_mobile">客户见证</router-link>
          <!-- <a href="#">客户见证</a> -->
        </li>
        <li :class="{ active: navmoIndex === 7 }" @click="selNav(7)">
          <router-link to="/page/news_mobile">新闻动态</router-link>
          <!-- <a href="#">新闻动态</a> -->
        </li>
        <li :class="{ active: navmoIndex === 8 }" @click="selNav(8)">
          <router-link to="/page/about_mobile">关于我们</router-link>
          <!--  <a href="#">关于我们</a> -->
        </li>
      </ul>
    </div>
    <!--导航结束-->
    <!-- 横幅开始 -->
    <div class="tooop">
      <img src="../assets/125.jpg" />
    </div>
    <!-- 横幅结束 -->
    <!-- 新闻内容开始 -->
    <div class="newas">
      <div class="newas-top">
        <h5>当前位置：首页>>关于我们>>新闻动态</h5>
        <ul class="new_list">
          <li v-for="(item, index) in newsList" :key="index">
            <div class="other_left">
              <h1 >{{ item.title }}</h1>
              <p >{{ item.Introduction }}</p>
              <!-- <div class="new_btn">
                  <span @click="goDetail">查看详情</span>
                  <span @click="goConsult">立即咨询</span>
                </div> -->
            </div>
            <div class="other_right">
              <span>{{item.time.split('-')[2]}}</span>
              <span>{{item.time.split('-')[0]+"-"+item.time.split('-')[1]}}</span>
              <span class="detailbtn" @click="goDetail(item.id)">查看详情</span>
            </div>
            <!-- <img src="../assets/6-1.jpg" /> -->
          </li>
        </ul>
      </div>
      <div class="newas-foot">
        <span @click="chakan()">点击查看更多>></span>
      </div>
    </div>
    <!-- 新闻内容结束 -->
    <!--脚部开始-->
    <div class="foot">
      <div class="foot_top">
        <div class="who">
          <h1>联系我们</h1>
          <p>服务热线：{{configData.mobile}}</p>
          <p>QQ：{{configData.qq}}</p>
          <p>地址：{{configData.city}}</p>
        </div>
      </div>
      <div class="foots">
        <div class="whoo">
          <p>
            {{configData.copyright}}<br />
            {{configData.record_number}}
          </p>
        </div>
      </div>
    </div>
    <!--脚部结束-->
  </div>
</template>

<script>
export default {
  data() {
    return {
      navmoIndex: 0,
      hide: false,
      navIndex: 0,
      configData:{},
      page: {
        size: 5,
        cont: 1,
        allcont: 1,
        total: 10,
        last: 1,
      },
      newsdata: [],
      newsList: [], // 新闻数据
    };
  },
  created() {
    if (localStorage.getItem("navmoIndex")) {
      this.navmoIndex = +localStorage.getItem("navmoIndex");
      console.log(this.navmoIndex);
    }
  },
  computed: {},
  watch: {},
  mounted() {
    this.getNewsClass();
    this.getNewsList();
    this.getConfig();
  },
  methods: {
    selNav(a) {
      this.navmoIndex = a;
      localStorage.setItem("navmoIndex", this.navmoIndex);
      console.log(a, this.navmoIndex);
    },
    selectNav(i) {
      this.navIndex = i;
    },
    getConfig () {
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/config")
        .then((res) => {
          console.log("配置", res.data.result);
          this.configData = res.data.result;
 
        })
        .catch((error) => {
          console.log(error);
        });
    },
    sizechange(a) {
      console.log(a);
      this.page.cont = a;
      this.getNewsList();
    },
    getNewsList() {
      var _this = this;
      _this.$ajax
        .get(
          "http://api.wld119.com/api/v1/article/list_xw?page=" + this.page.cont + "&limit=" + this.page.size
        )
        .then((res) => {
          console.log("新闻列表", res.data.result);
          // this.newsdata = res.data.result
          this.page.allcont = res.data.result.per_page
          this.page.total = res.data.result.total;
          this.page.last = res.data.result.last_page;
          let dataList = res.data.result.data;
          this.newsList = this.newsList.concat(dataList);
          console.log(this.newsList);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getNewsClass() {
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/article/indexs")
        .then((res) => {
          console.log("新闻分类", res.data);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getNewsDetail() {
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/article/index_info")
        .then((res) => {
          console.log("123", "新闻详情", res.data);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    goDetail(id) {
      this.$router.push({
        path: "/page/newsDetail_mobile",
        query: {
          id: id,
        },
      });
    },
    chakan() {
      if (this.page.last === this.page.cont) return
      this.page.cont++;
      this.getNewsList()
    },
    gozixun() {},
    goConsult() {},
  },
};
</script>
<style  scoped>
.news-mobile {
  max-width: 7.5rem;
  margin: 0 auto;
}
/* 页头 */
.yetou {
  color: #fff;
  background: #0061ae;
  height: 1.4rem;
}
.none2 {
  width: 6.9rem;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
}
.bt-left {
  padding: 0.1rem;
}
.bt-left h1 {
  font-size: 0.45rem;
}
.bt-left p {
  font-size: 0.35rem;
}
.menu img {
  width: 0.8rem;
}

/* 页头 */
/* 导航开始*/
.nav-tb {
  width: 100%;
  text-align: center;
  background: #f9f9f9;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  overflow: hidden;
}
.vae a {
  display: block;
  border: 1px solid #ededed;
  padding: 0.2rem;
  line-height: 0.4rem;
}
.nav-tb li {
  width: 2.5rem;
}
.nav-tb a:hover {
  color: #ffffff;
  background: #d6af62;
}
/* 导航结束*/
/* 横幅 */
.tooop img {
  width: 100%;
}
/* 横幅 */
/* 新闻资讯开始 */
.new_list {
  width: 7rem;
  margin: 0 auto;
  
  margin-top: 0.1rem;
}
.new_list li{
  margin-bottom: 0.1rem;
  background: #f9f9f9;
  overflow: hidden;
  padding-bottom: 0.1rem;
}
.other_left {
  width: 5rem;
  float: left;
  overflow: hidden;
}
.other_left h1{
  color: #0061ae;
  font-weight: bold;
  padding-top: 0.2rem;
  padding-left: 0.1rem;
}
.other_left p{
 font-size: 0.25rem;
 padding-left: 0.1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.other_right {
  width: 2rem;
  padding-top: 0.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  /* justify-self: ; */
}
.other_right span:nth-child(2) {
  margin-bottom: 0.1rem;
}
.detailbtn {
  width: 1.5rem;
  line-height: 0.5rem;
  text-align: center;
  background: #0061ae;
  color: #fff;
}
.newas {
  width: 7rem;
  min-height: 7rem;
  margin: 0 auto;
}
.newas-left {
  height: 2.05rem;
  background: #f9f9f9;
  margin-top: 0.1rem;
}
.newas-foot {
  width: 7rem;
  line-height: 0.7rem;
  text-align: center;
  background: #f9f9f9;
  color: #0061ae;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  overflow: hidden;
}
/* 新闻资讯结束 */
/* 页脚开始 */
.foot_top {
  line-height: 0.45rem;
  margin: 0 auto;
  background: #0061ae;
  color: #fff;
  overflow: hidden;
}
.foot_top h1 {
  font-size: 0.35rem;
  padding: 0.1rem;
}
.foot_top p {
  font-size: 0.25rem;
  padding: 0 0.1rem;
  padding-bottom: 0.1rem;
}
.foots {
  line-height: 0.4rem;
  margin: 0 auto;
  background: #666;
  color: #fff;
}
.foots p {
  font-size: 0.2rem;
  text-align: center;
}
.who,
.whoo {
  width: 7rem;
  margin: 0 auto;
}
/* 页脚结束 */
</style>